<template>
  <div class="help-documentation">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>帮助文档</span>
          <div class="header-actions">
            <el-button type="primary" @click="searchHelp">搜索帮助</el-button>
            <el-button @click="exportHelp">导出文档</el-button>
          </div>
        </div>
      </template>
      
      <el-row :gutter="20">
        <!-- 帮助目录 -->
        <el-col :span="6">
          <el-card class="help-menu-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>帮助目录</span>
              </div>
            </template>
            
            <el-tree
              :data="helpTree"
              :props="treeProps"
              node-key="id"
              default-expand-all
              @node-click="selectHelpItem"
              :highlight-current="true"
            >
              <template #default="{ node, data }">
                <div class="tree-node">
                  <el-icon class="node-icon">
                    <Document v-if="data.type === 'document'" />
                    <Folder v-else />
                  </el-icon>
                  <span class="node-label">{{ data.label }}</span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </el-col>
        
        <!-- 帮助内容 -->
        <el-col :span="18">
          <el-card class="help-content-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>{{ selectedHelpItem ? selectedHelpItem.label : '帮助内容' }}</span>
                <div class="header-actions" v-if="selectedHelpItem">
                  <el-button type="text" @click="printHelp">打印</el-button>
                  <el-button type="text" @click="shareHelp">分享</el-button>
                </div>
              </div>
            </template>
            
            <div v-if="selectedHelpItem" class="help-content">
              <div class="help-header">
                <h2>{{ selectedHelpItem.label }}</h2>
                <div class="help-meta">
                  <span>更新时间：{{ selectedHelpItem.updateTime }}</span>
                  <span>阅读量：{{ selectedHelpItem.viewCount }}</span>
                </div>
              </div>
              
              <div class="help-body" v-html="selectedHelpItem.content"></div>
              
              <div class="help-footer">
                <div class="help-navigation">
                  <el-button 
                    v-if="selectedHelpItem.prev" 
                    @click="navigateHelp(selectedHelpItem.prev)"
                    size="small"
                  >
                    ← 上一篇：{{ selectedHelpItem.prev.label }}
                  </el-button>
                  <el-button 
                    v-if="selectedHelpItem.next" 
                    @click="navigateHelp(selectedHelpItem.next)"
                    size="small"
                  >
                    下一篇：{{ selectedHelpItem.next.label }} →
                  </el-button>
                </div>
                
                <div class="help-feedback">
                  <span>这篇文档对您有帮助吗？</span>
                  <el-button type="text" @click="rateHelp('helpful')">有帮助</el-button>
                  <el-button type="text" @click="rateHelp('not-helpful')">没帮助</el-button>
                </div>
              </div>
            </div>
            
            <div v-else class="empty-content">
              <el-empty description="请选择帮助文档查看内容" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 搜索对话框 -->
    <el-dialog
      v-model="searchDialogVisible"
      title="搜索帮助"
      width="600px"
    >
      <el-input
        v-model="searchKeyword"
        placeholder="请输入搜索关键词"
        @keyup.enter="performSearch"
        clearable
      >
        <template #append>
          <el-button @click="performSearch">搜索</el-button>
        </template>
      </el-input>
      
      <div class="search-results" v-if="searchResults.length > 0">
        <h4>搜索结果</h4>
        <div 
          v-for="result in searchResults" 
          :key="result.id"
          class="search-result-item"
          @click="selectSearchResult(result)"
        >
          <h5>{{ result.title }}</h5>
          <p>{{ result.excerpt }}</p>
          <span class="result-path">{{ result.path }}</span>
        </div>
      </div>
      
      <div v-else-if="hasSearched" class="no-results">
        <el-empty description="未找到相关帮助文档" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Folder } from '@element-plus/icons-vue'

const searchDialogVisible = ref(false)
const searchKeyword = ref('')
const hasSearched = ref(false)
const selectedHelpItem = ref<any>(null)
const searchResults = ref<any[]>([])

// 树形配置
const treeProps = {
  children: 'children',
  label: 'label'
}

// 帮助文档树
const helpTree = ref([
  {
    id: 1,
    label: '快速开始',
    type: 'category',
    children: [
      {
        id: 11,
        label: '系统介绍',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 1250,
        content: `
          <h3>资产管理系统简介</h3>
          <p>资产管理系统是一个专门用于管理企业资产的信息化平台，提供资产的全生命周期管理功能。</p>
          
          <h4>主要功能</h4>
          <ul>
            <li><strong>资产管理：</strong>支持资产的录入、编辑、查询、删除等基本操作</li>
            <li><strong>分类管理：</strong>提供灵活的资产分类体系，支持树形结构</li>
            <li><strong>维护管理：</strong>记录资产的维护历史，制定维护计划</li>
            <li><strong>报表统计：</strong>生成各类统计报表，支持数据导出</li>
            <li><strong>用户管理：</strong>完善的用户权限管理体系</li>
          </ul>
          
          <h4>系统特点</h4>
          <ul>
            <li>界面简洁美观，操作便捷</li>
            <li>数据安全可靠，支持备份恢复</li>
            <li>功能模块化，易于扩展</li>
            <li>支持多用户并发访问</li>
          </ul>
        `,
        prev: null,
        next: { id: 12, label: '用户登录' }
      },
      {
        id: 12,
        label: '用户登录',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 890,
        content: `
          <h3>用户登录指南</h3>
          <p>本文档将详细介绍如何登录资产管理系统。</p>
          
          <h4>登录步骤</h4>
          <ol>
            <li>打开浏览器，访问系统登录页面</li>
            <li>输入用户名和密码</li>
            <li>点击"登录"按钮</li>
            <li>验证成功后进入系统主界面</li>
          </ol>
          
          <h4>注意事项</h4>
          <ul>
            <li>用户名区分大小写</li>
            <li>密码输入错误超过5次将被锁定</li>
            <li>建议定期修改密码</li>
            <li>首次登录需要修改默认密码</li>
          </ul>
          
          <h4>常见问题</h4>
          <p><strong>Q: 忘记密码怎么办？</strong></p>
          <p>A: 请联系系统管理员重置密码。</p>
          
          <p><strong>Q: 登录页面无法显示？</strong></p>
          <p>A: 请检查网络连接，或清除浏览器缓存后重试。</p>
        `,
        prev: { id: 11, label: '系统介绍' },
        next: { id: 13, label: '界面导航' }
      },
      {
        id: 13,
        label: '界面导航',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 756,
        content: `
          <h3>界面导航说明</h3>
          <p>了解系统界面的布局和导航方式。</p>
          
          <h4>界面布局</h4>
          <ul>
            <li><strong>顶部导航栏：</strong>显示系统标题和用户信息</li>
            <li><strong>左侧菜单栏：</strong>主要功能模块导航</li>
            <li><strong>主内容区：</strong>显示具体功能页面</li>
            <li><strong>面包屑导航：</strong>显示当前页面位置</li>
          </ul>
          
          <h4>菜单结构</h4>
          <ul>
            <li><strong>仪表盘：</strong>系统概览和统计数据</li>
            <li><strong>资产管理：</strong>资产相关操作</li>
            <li><strong>分类管理：</strong>资产分类管理</li>
            <li><strong>维护管理：</strong>维护记录和计划</li>
            <li><strong>用户管理：</strong>用户和权限管理</li>
            <li><strong>报表统计：</strong>数据统计和报表</li>
            <li><strong>系统设置：</strong>系统配置和管理</li>
          </ul>
        `,
        prev: { id: 12, label: '用户登录' },
        next: null
      }
    ]
  },
  {
    id: 2,
    label: '功能操作',
    type: 'category',
    children: [
      {
        id: 21,
        label: '资产管理',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 1023,
        content: `
          <h3>资产管理操作指南</h3>
          <p>详细介绍资产管理模块的各项功能操作。</p>
          
          <h4>添加资产</h4>
          <ol>
            <li>进入"资产管理" → "添加资产"</li>
            <li>填写资产基本信息</li>
            <li>选择资产分类</li>
            <li>上传资产图片（可选）</li>
            <li>点击"保存"完成添加</li>
          </ol>
          
          <h4>编辑资产</h4>
          <ol>
            <li>在资产列表中找到要编辑的资产</li>
            <li>点击"编辑"按钮</li>
            <li>修改相关信息</li>
            <li>保存更改</li>
          </ol>
          
          <h4>删除资产</h4>
          <ol>
            <li>选择要删除的资产</li>
            <li>点击"删除"按钮</li>
            <li>确认删除操作</li>
          </ol>
          
          <h4>批量操作</h4>
          <p>支持批量导入、导出、删除等操作，提高工作效率。</p>
        `,
        prev: null,
        next: { id: 22, label: '分类管理' }
      },
      {
        id: 22,
        label: '分类管理',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 678,
        content: `
          <h3>分类管理操作指南</h3>
          <p>学习如何管理资产分类体系。</p>
          
          <h4>创建分类</h4>
          <ol>
            <li>进入"分类管理" → "添加分类"</li>
            <li>输入分类名称和编码</li>
            <li>选择上级分类（可选）</li>
            <li>设置排序和状态</li>
            <li>保存分类</li>
          </ol>
          
          <h4>分类树形管理</h4>
          <p>支持树形结构的分类管理，可以创建多级分类。</p>
          
          <h4>分类维护</h4>
          <ul>
            <li>编辑分类信息</li>
            <li>调整分类顺序</li>
            <li>启用/禁用分类</li>
            <li>删除空分类</li>
          </ul>
        `,
        prev: { id: 21, label: '资产管理' },
        next: { id: 23, label: '维护管理' }
      },
      {
        id: 23,
        label: '维护管理',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 445,
        content: `
          <h3>维护管理操作指南</h3>
          <p>了解如何管理资产的维护记录和计划。</p>
          
          <h4>添加维护记录</h4>
          <ol>
            <li>选择要维护的资产</li>
            <li>填写维护信息</li>
            <li>记录维护结果</li>
            <li>保存维护记录</li>
          </ol>
          
          <h4>制定维护计划</h4>
          <ol>
            <li>创建维护计划</li>
            <li>设置执行频率</li>
            <li>指定维护人员</li>
            <li>设置提醒时间</li>
          </ol>
          
          <h4>维护统计</h4>
          <p>查看维护历史统计，分析维护成本。</p>
        `,
        prev: { id: 22, label: '分类管理' },
        next: null
      }
    ]
  },
  {
    id: 3,
    label: '常见问题',
    type: 'category',
    children: [
      {
        id: 31,
        label: 'FAQ',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 1567,
        content: `
          <h3>常见问题解答</h3>
          <p>收集了用户最常遇到的问题和解答。</p>
          
          <h4>系统相关</h4>
          <p><strong>Q: 系统支持哪些浏览器？</strong></p>
          <p>A: 支持Chrome、Firefox、Safari、Edge等主流浏览器。</p>
          
          <p><strong>Q: 如何修改密码？</strong></p>
          <p>A: 登录后点击右上角用户头像，选择"修改密码"。</p>
          
          <p><strong>Q: 数据会自动保存吗？</strong></p>
          <p>A: 系统会自动保存草稿，但建议及时保存重要数据。</p>
          
          <h4>功能相关</h4>
          <p><strong>Q: 如何批量导入资产？</strong></p>
          <p>A: 使用Excel模板，在"资产管理" → "批量导入"中操作。</p>
          
          <p><strong>Q: 可以导出哪些格式的报表？</strong></p>
          <p>A: 支持Excel、PDF、Word等格式导出。</p>
          
          <p><strong>Q: 如何设置数据备份？</strong></p>
          <p>A: 在"系统设置" → "数据备份"中配置自动备份计划。</p>
        `,
        prev: null,
        next: { id: 32, label: '故障排除' }
      },
      {
        id: 32,
        label: '故障排除',
        type: 'document',
        updateTime: '2024-01-15',
        viewCount: 892,
        content: `
          <h3>故障排除指南</h3>
          <p>帮助您解决使用过程中遇到的问题。</p>
          
          <h4>登录问题</h4>
          <ul>
            <li>检查用户名密码是否正确</li>
            <li>确认账号是否被锁定</li>
            <li>清除浏览器缓存</li>
            <li>尝试使用无痕模式</li>
          </ul>
          
          <h4>功能异常</h4>
          <ul>
            <li>刷新页面重试</li>
            <li>检查网络连接</li>
            <li>联系技术支持</li>
          </ul>
          
          <h4>数据问题</h4>
          <ul>
            <li>检查数据格式是否正确</li>
            <li>确认必填字段已填写</li>
            <li>验证数据范围是否合理</li>
          </ul>
        `,
        prev: { id: 31, label: 'FAQ' },
        next: null
      }
    ]
  }
])

// 方法
const selectHelpItem = (data: any) => {
  if (data.type === 'document') {
    selectedHelpItem.value = data
  }
}

const searchHelp = () => {
  searchDialogVisible.value = true
  searchKeyword.value = ''
  searchResults.value = []
  hasSearched.value = false
}

const performSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  hasSearched.value = true
  // 模拟搜索
  searchResults.value = [
    {
      id: 11,
      title: '系统介绍',
      excerpt: '资产管理系统是一个专门用于管理企业资产的信息化平台...',
      path: '快速开始 > 系统介绍'
    },
    {
      id: 21,
      title: '资产管理',
      excerpt: '详细介绍资产管理模块的各项功能操作...',
      path: '功能操作 > 资产管理'
    }
  ]
}

const selectSearchResult = (result: any) => {
  // 根据搜索结果找到对应的帮助项
  const findHelpItem = (items: any[]): any => {
    for (const item of items) {
      if (item.id === result.id) {
        return item
      }
      if (item.children) {
        const found = findHelpItem(item.children)
        if (found) return found
      }
    }
    return null
  }
  
  const helpItem = findHelpItem(helpTree.value)
  if (helpItem) {
    selectedHelpItem.value = helpItem
    searchDialogVisible.value = false
  }
}

const navigateHelp = (target: any) => {
  const findHelpItem = (items: any[]): any => {
    for (const item of items) {
      if (item.id === target.id) {
        return item
      }
      if (item.children) {
        const found = findHelpItem(item.children)
        if (found) return found
      }
    }
    return null
  }
  
  const helpItem = findHelpItem(helpTree.value)
  if (helpItem) {
    selectedHelpItem.value = helpItem
  }
}

const rateHelp = (rating: string) => {
  if (rating === 'helpful') {
    ElMessage.success('感谢您的反馈！')
  } else {
    ElMessage.info('我们会继续改进，感谢您的反馈！')
  }
}

const printHelp = () => {
  if (selectedHelpItem.value) {
    window.print()
  }
}

const shareHelp = () => {
  if (selectedHelpItem.value) {
    // 复制链接到剪贴板
    const url = `${window.location.origin}/help/${selectedHelpItem.value.id}`
    navigator.clipboard.writeText(url).then(() => {
      ElMessage.success('链接已复制到剪贴板')
    })
  }
}

const exportHelp = () => {
  ElMessage.success('帮助文档导出功能开发中...')
}
</script>

<style scoped>
.help-documentation {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.help-menu-card {
  height: 600px;
}

.help-content-card {
  height: 600px;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon {
  font-size: 16px;
  color: #909399;
}

.node-label {
  flex: 1;
}

.help-content {
  height: 500px;
  overflow-y: auto;
  padding: 20px;
}

.help-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.help-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.help-meta {
  display: flex;
  gap: 20px;
  color: #909399;
  font-size: 14px;
}

.help-body {
  line-height: 1.8;
  color: #606266;
  margin-bottom: 30px;
}

.help-body h3 {
  color: #303133;
  margin: 20px 0 10px 0;
}

.help-body h4 {
  color: #303133;
  margin: 15px 0 8px 0;
}

.help-body ul, .help-body ol {
  margin: 10px 0;
  padding-left: 20px;
}

.help-body li {
  margin: 5px 0;
}

.help-footer {
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.help-navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.help-feedback {
  text-align: center;
  color: #909399;
}

.empty-content {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-results {
  margin-top: 20px;
}

.search-result-item {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.search-result-item:hover {
  background-color: #f5f7fa;
  border-color: #409eff;
}

.search-result-item h5 {
  margin: 0 0 8px 0;
  color: #303133;
}

.search-result-item p {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
}

.result-path {
  color: #909399;
  font-size: 12px;
}

.no-results {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .help-documentation {
    padding: 10px;
  }
  
  .help-menu-card,
  .help-content-card {
    height: auto;
    margin-bottom: 20px;
  }
  
  .help-navigation {
    flex-direction: column;
    gap: 10px;
  }
}
</style> 